<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>

        <style>
            .container {
                position: relative;
                padding: 10px;
            }

            .img-box img {
                width: 200px;
                border: 2px solid black;
                border-radius: 20px;
            }

            .img-box {
                width: 200px;
                display: inline-block;
                vertical-align: top;

                overflow: hidden;
                transition: all 0.3s;
            }

            .img-box:hover {
                transform: scale(1.1);
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="img-box">
                <img src="./img/1.png" alt="" />
                <p>1</p>
            </div>
            <div class="img-box">
                <img src="./img/2.png" alt="" />
                <p>2</p>
            </div>
            <div class="img-box">
                <img src="./img/3.png" alt="" />
                <p>3</p>
            </div>
            <div class="img-box">
                <img src="./img/4.png" alt="" />
                <p>4</p>
            </div>
            <div class="img-box">
                <img src="./img/5.png" alt="" />
                <p>5</p>
            </div>
            <div class="img-box">
                <img src="./img/6.png" alt="" />
                <p>6</p>
            </div>
            <div class="img-box">
                <img src="./img/7.png" alt="" />
                <p>7</p>
            </div>
            <div class="img-box">
                <img src="./img/8.png" alt="" />
                <p>8</p>
            </div>
        </div>

        <script>
            /*

        var imgBoxes = document.querySelectorAll('.img-box');
        var minHeight = Infinity; // 初始化最小高度为无穷大
        var minHeightIndex = -1; // 初始化最小高度的索引为-1
        for (var i = 0; i < imgBoxes.length; i++) {
            var imgBox = imgBoxes[i];
            var imgHeight = parseInt(window.getComputedStyle(imgBox.querySelector('img')).height);
            if (imgHeight < minHeight) {
                minHeight = imgHeight;
                minHeightIndex = i;
            }
        }

        addImgBox();

        function addImgBox() {
          
        
            for (var i = 0; i < imgBoxes.length; i++) {
                var imgBoxi = imgBoxes[i];
                if (parseInt(window.getComputedStyle(imgBoxi.querySelector('img')).height) < minHeight) {
                    minHeight = parseInt(window.getComputedStyle(imgBoxi.querySelector('img')).height);
                    minHeightIndex = i;
                }
            }
            return minHeightIndex



        }
        






        for (var i = 0; i < 5; i++) {
            addImgBox();
        }
*/

            window.onload = waterfallFn;

            // resize 事件 监听切换窗口大小事件
            // 监听窗口大小事件
            window.onresize = waterfallFn;

            // 瀑布流函数
            function waterfallFn() {
                // 设定每个元素的间隙
                let space = 20;
                let boxList = document.querySelectorAll('.box');
                // 每个元素的宽度
                const boxWidth = boxList[0].offsetWidth + space;
                // 获取当前页面的列数 (一行能够容纳多少个元素)
                const colCount = Math.floor(window.innerWidth / boxWidth);
                // 创建一个数组, 数组成员列数成员的高度
                let heightArr = new Array(colCount).fill(0); // [0,0,0]
                // 遍历所有的元素, 比较他们的高度, 设置最小高度
                boxList.forEach((el) => {
                    // todo 获取元素真实高度
                    const h = el.offsetHeight;
                    // todo 获取最小高度 (拿当前遍历的元素高度比较)
                    // const minH = Math.min(...heightArr)
                    // toSorted 新数组排序方法, 和sort功能一致, 区别是不会修改原数组
                    const minH = heightArr.toSorted((a, b) => a - b)[0];
                    // todo 把最小高度的值重置 (拿当前元素的高度 + 最小值的高度)
                    // 获取最小值的下标
                    const minIndex = heightArr.indexOf(minH);
                    // todo 修改元素的位置
                    // 一次性写入样式
                    el.style.cssText = `
      position: absolute;
      top: ${minH}px;
      left: ${boxWidth * minIndex}px;
      `;
                    // 修改最小高度的值 (累加)
                    heightArr[minIndex] += h + space;
                });
            }
        </script>
    </body>
</html>
